<template>
  <div v-loading="loading" v-show="loading == false">
    <el-container style="height: 500px;">
      <el-header style="font-size: 12px;">
        <el-row>
          <el-col :span="3">
            <div style="font-size: 20px; color: #ffffff; font-weight: bold; margin: auto;">用户中心</div>
          </el-col>
          <el-col :span="15">
            <div class="grid-content">
              <!-- <el-button>刷新</el-button> -->
            </div>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button
              icon="el-icon-shopping-cart-2"
              style="color: #ffffff; background-color: rgba(255,255,255,0.2); border: none; margin-right: 20px;"
              circle
              plain
              @click="toShoppingcart"
            ></el-button>
            <!-- <i class="el-icon-shopping-cart-2" style="margin: 10px;"></i> -->
            <span style="font-size: 16px; color: #ffffff; margin-right: 10px;">{{user.userName}}</span>
            <el-dropdown style="margin-right: 10px;">
              <i class="el-icon-setting" style="margin-left: 15px; color: #ffffff"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <!-- default-active="1" -->
          <el-menu :default-active="menuIndex" :active="menuIndex">
            <el-menu-item index="1" @click="setShowIndex(10)">
              <i class="el-icon-user"></i>个人信息
            </el-menu-item>

            <el-menu-item index="2" @click="setShowIndex(20)">
              <i class="el-icon-star-off"></i>店铺收藏
            </el-menu-item>

            <el-menu-item index="3" @click="setShowIndex(30)">
              <i class="el-icon-office-building"></i>收货地址
            </el-menu-item>

            <el-menu-item index="4" @click="setShowIndex(40)">
              <i class="el-icon-tickets"></i>我的订单
            </el-menu-item>

            <el-menu-item index="5" @click="setShowIndex(50)">
              <i class="el-icon-chat-dot-round"></i>留言消息
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>
            <Info ref="menuInfo" v-show="showIndex == 10" @userInfoUpdate="userInfoUpdate" />

            <Collect v-if="showIndex == 20" @toMessage="toMessage" />

            <Address v-if="showIndex == 30" />

            <Order v-if="showIndex == 40" />

            <Message v-if="showIndex == 50" />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Info from "@/components/UserCenter/Info";
import Collect from "@/components/UserCenter/Collect";
import Address from "@/components/UserCenter/Address";
import Order from "@/components/UserCenter/Order";
import Message from "@/components/UserCenter/Message";

export default {
  name: "UserCenter",
  data() {
    return {
      loading: true,
      showIndex: 10,
      menuIndex: "1",
      user: {},
    };
  },
  components: {
    Info,
    Collect,
    Address,
    Order,
    Message,
  },
  methods: {
    toMessage(exSession) {
      var menuIndex = "5";
      this.menuIndex = menuIndex;
      this.setShowIndex(50);
    },
    setShowIndex(showIndex) {
      this.setUrlPath(showIndex);

      var url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          if (response.data.status != "ok") {
            this.loading = true;
            this.setUrlPath(0);
            this.$emit("needLogin");
          } else {
            this.showIndex = showIndex;
          }
        },
        (response) => {
          this.loading = true;
          this.setUrlPath(0);
          this.$emit("needLogin");
        }
      );
    },
    setUrlPath(showIndex) {
      // console.log(this.$router);
      var path = this.$router.history.current.path;
      var query = {};

      // console.log(this.$router.history.current.query);

      switch (showIndex) {
        case 10:
          query = {};
          break;
        case 20:
          query = { menu: "collect" };
          break;
        case 30:
          query = { menu: "address" };
          break;
        case 40:
          query = { menu: "order" };
          break;
        case 50:
          query = { menu: "message" };
          break;
      }

      this.$router.push({ path, query: query });
    },
    userInfoUpdate(user) {
      // console.log(user);
      this.user = user;
    },
    logout() {
      var url = process.env.URL_HEAD + "/touser/user/page/logout";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            // this.$message.success("退出成功！");
            this.loading = true;
            location.reload();
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
    },
    toShoppingcart() {
      window.location.href = process.env.SHOPPINGCART_URL;
    },
  },
  created() {
    console.log(this.$route.query.menu);

    switch (this.$route.query.menu) {
      case "info":
        this.menuIndex = "1";
        this.setShowIndex(10);
        break;
      case "collect":
        this.menuIndex = "2";
        this.setShowIndex(20);
        break;
      case "address":
        this.menuIndex = "3";
        this.setShowIndex(30);
        break;
      case "order":
        this.menuIndex = "4";
        this.setShowIndex(40);
        break;
      case "message":
        this.menuIndex = "5";
        this.setShowIndex(50);
        break;
    }
  },
  mounted() {
    // var url = process.env.URL_HEAD + "/touser/user/page/check/login";

    // console.log(url);
    // this.$http
    //   .get(url, {
    //     withCredentials: true,
    //   })
    //   .then(
    //     (response) => {
    //       console.log(response.data);
    //     },
    //     (response) => {
    //       console.log("initInfo fail");
    //     }
    //   );

    // url = process.env.URL_HEAD + "/touser/user/user/login";

    // console.log(url);
    // this.$http
    //   .get(url, {
    //     params: {ID: "guo", password: "root"},
    //     withCredentials: true,
    //   })
    //   .then(
    //     (response) => {
    //       console.log(response.data);
    //     },
    //     (response) => {
    //       console.log("initInfo fail");
    //     }
    //   );

    
    // return;

    var url = process.env.URL_HEAD + "/touser/user/page/init/info";
    this.$http
      .get(url, {
        withCredentials: true,
      })
      .then(
        (response) => {
          console.log(response.data);
          

          if (response.data.user != null) {
            var user = response.data.user;

            if (user.userType == 1) user.userType = "普通会员";
            else if (user.userType == 10) user.userType = "高级会员";

            //头像地址拼接
            //注意拼接
            user.userIcon = user.userIcon;

            this.user = user;

            // console.log(this.$refs.menuInfo);
            this.$refs.menuInfo.init(user);

            this.loading = false;
            console.log("initInfo ok");
          } else {
            this.setUrlPath(0);
            console.log("no login");
            this.$emit("needLogin");
          }
        },
        (response) => {
          this.setUrlPath(0);
          console.log("initInfo fail");
          this.$emit("needLogin");
        }
      );
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  background-color: #69a57b;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.grid-content {
  min-height: 36px;
}
</style>
